<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
    <meta charset="UTF-8">
    <title th:text="#{tag} + ' - Online Judge'"></title>
    <meta http-equiv="keywords" th:content="'HappyOJ, Online Judge, 编程, 在线判题系统, 在线IDE'">
    <meta http-equiv="description" th:content="'HappyOJ ' + #{tag}">
    <link rel="stylesheet" th:href="@{/css/styles.css}" >
    <script th:src="@{/js/jquery-1.7.2.js}"></script>
    <script th:src="@{/js/gdoj.js}"></script>
</head>
<body>
<div th:replace="common::web-navbar"></div>
<div class="container">
    <div class="content">
        <div class="content-with-sidebar">
            <div class="tag-search">
                <h2 class="tag-nums" th:text="${pageInfo.total} + ' ' + #{tags}"></h2>
                <p class="" style="line-height: 20px" th:text="#{tag_description}"></p>
                <input class="tagSearch" name="tagSearch" type="text" th:placeholder="#{tag-search-placeholder}" />
            </div>
            <div class="tag-layout" >
                <div class="tag-layout__item" th:each="tag,stat : ${pageInfo.list}">
                    <div class="tag-header">
                        <div class="tags">
                        <span>
                             <a rel="tag" th:text="${tag.name}"></a>
                        </span>
                        </div>
                    </div>
                    <div class="tag-description" th:tagname="${tag.name}">
                        <span th:title="${tag.description}" th:text="${tag.description}"></span>
                    </div>
                    <div class="tag-stat">
                        <div>
                            <a th:href="'/problemset?tag=' + ${tag.name}" rel="tag" th:text="${tag.problem_count} + ' '"></a> [[#{tag_problems}]] ,
                            <a th:href="'/topics?tag=' + ${tag.name}" rel="tag" th:text="${tag.topic_count} + ' '"></a> [[#{tag_topics}]],
                            [[#{post}]] <span th:title="${#dates.format(tag.indate,'yyyy-MM-dd HH:mm:ss')}" th:text="${tag.createFriendlyDate}"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div style="margin:0 12px;font-size:15px;">
                <div class=left></div>
                <div class="right">
                    <a th:if="${pageInfo.hasPreviousPage == true}" th:href="@{/tags/page/{pageNum}(pageNum=${pageInfo.prePage})}" style="color:#000;text-decoration: none;">&larr;</a>
                    <a th:if="${pageInfo.firstPage > 1}" th:href="@{/tags/page/1}" style="color:#000;text-decoration: none;">1</a>
                    <span th:if="${pageInfo.firstPage > 2}"  >...</span>
                    <span th:each="nav:${pageInfo.navigatepageNums}">
                    <a th:href="@{/tags/page/{pageNum}(pageNum=${nav})}" th:text="${nav}" th:if="${nav == pageInfo.pageNum}" style="font-weight: bold;color:#000;text-decoration: none;"></a>
                    <a th:href="@{/tags/page/{pageNum}(pageNum=${nav})}" th:text="${nav}" th:if="${nav != pageInfo.pageNum}" style="color:#000;text-decoration: none;"></a>
                    </span>
                    <span th:if="${pageInfo.lastPage < pageInfo.pages}" >...</span>
                    <a th:if="${pageInfo.pages > pageInfo.lastPage}" th:href="@{/tags/page/{pageNum}(pageNum=${pageInfo.pages})}" th:text="${pageInfo.pages}" style="color:#000;text-decoration: none;"></a>
                    <a th:if="${pageInfo.hasNextPage == true}" th:href="@{/tags/page/{pageNum}(pageNum=${pageInfo.nextPage})}" style="color:#000;text-decoration: none;">&rarr;</a>
                </div>
            </div>
        </div>
        <div class="sidebar" th:replace="sidebar::web-sidebar"></div>
    </div>
    <div th:replace="common::web-footer"></div>
</div>
<script th:src="@{/js/messager.js}"></script>
<script>
$(document).ready(function(){
    function ShowTagModifyArea(element) {
        var tag_name = element.attr("tagname");
        var tag_desc = element.text().trim()
        var appendHtml ="<textarea id='temp' class='tag-textarea small-scrollbar'></textarea><span class='fielderror'></span>"
        element.text("");
        element.append(appendHtml);
        $("textarea#temp").html(tag_desc)
        $("textarea#temp").focus();
        $("textarea").blur(function(){
            var new_desc = $(this).val()
            $.post("/api/tag/post",{ type: 'edit', name: tag_name, description: new_desc},
                function (data) {
                    if (data.code != 200) {
                        $(".fielderror").html(data.msg);
                        $("textarea#temp").focus();
                        return;
                    }
                    element.html(new_desc);
                    $.messager.show('提示', '标签 ' + tag_name + '已更新。', 5000);
                },
                "json"
            );
        })
    }

    $(document).on("dblclick",".tag-description",function(){
        var element = $(this)
        $.getJSON("/api/role/check", {},function(json) {
            if (json.code == 200) {
                ShowTagModifyArea(element);
            }
        });
    });

    function showFilterTags(data) {
        $(".tag-layout").html("");
        var opt = "";
        var tags = data.tagList;
        $.each(tags, function(i, event) {
            opt +=
                "<div class='tag-layout__item'>"+
                "<div class='tag-header'>"+
                "<div class='tags'>"+
                "<span><a rel='tag'>" + tags[i].name + "</a></span>"+
                "</div>"+
                "</div>"+
                "<div class='tag-description' tagname='"+ tags[i].name + "'>";
                if (tags[i].description != null) {
                    opt += "<span title='" + tags[i].description + "'>" + tags[i].description + "</span>";
                } else {
                    opt += "No description";
                }
            opt +="</div>"+
                "<div class='tag-stat'>"+
                "<div>"+
                "<a href='/problemset?tag=" + tags[i].name + "' rel='tag'>"+ tags[i].problem_count + "</a>" + " " + data.tag_problems_name + ", " +
                "<a href='/topics?tag=" + tags[i].name + "' rel='tag'>"+ tags[i].topic_count + "</a>" + " " + data.tag_topics_name + ", " +
                data.tag_post_name + "<span >" + tags[i].createFriendlyDate + "</span>"+
                "</div>"+
                "</div>"+
                "</div>";
        });
        $(".tag-layout").html(opt);
        $(".tag-nums").html(tags.length + " " + data.tags_name);

    }

    var cache = {};
    function tagsFilter(word) {
        if ( word in cache ) {
            showFilterTags(cache[ word ]);
        } else {
            $.getJSON("/api/tags/filter",{q: word},function(json) {
                if (json.success != true) {
                    cache[ word ] = json.data;
                    showFilterTags(json.data);
                }
            });
        }
    }

    $(".tagSearch").bind('input propertychange',function(e) {
        var word = $(this).val();

        if (window.event && event.type == 'propertychange' && event.propertyName != 'value')
            return;

        window.clearTimeout($(this).data('timeout'));
        $(this).data('timeout', setTimeout(function () {
            tagsFilter(word);
        }, 2000));
    });
});
</script>
</body>
</html>
